<template>
  <div class="table-page">
    <GiTable
      row-key="id"
      id="materialList"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
    >
      <template #custom-extra>
        <a-space>
          <a-button type="primary" size="small" @click="onAddOrEdit(false)">
            <template #icon><icon-plus /> </template>
            <span>新增</span>
          </a-button>
        </a-space>
      </template>
      <template #isPush="{ record }">
        <a-switch
          :checked-value="true"
          checked-text="是"
          :unchecked-value="false"
          unchecked-text="否"
          v-model="record.isPush"
          :before-change="handleChangeStatus.bind(null, record, 'isPush')"
        >
        </a-switch>
      </template>
      <template #enabled="{ record }">
        <a-switch
          :checked-value="true"
          checked-text="是"
          :unchecked-value="false"
          unchecked-text="否"
          v-model="record.enabled"
          :before-change="handleChangeStatus.bind(null, record, 'enabled')"
        >
        </a-switch>
      </template>
      <template #label="{ record }">
        <a-space wrap>
          <a-tag bordered v-for="(item, index) in record.label" :key="index">{{ item }}</a-tag>
        </a-space>
      </template>
      <template #allowPushAt="{ record }">
        <a-tag color="arcoblue"> {{ record.allowPushAt }} min</a-tag>
      </template>
      <template #expirePushAt="{ record }">
        <a-tag color="arcoblue"> {{ record.expirePushAt }} min</a-tag>
      </template>
      <template #action="{ record }">
        <a-button type="text" size="small" @click="onAddOrEdit(record)"> 编辑 </a-button>
        <a-button type="text" size="small" @click="preview(record)"> 发送预览 </a-button>
      </template>
    </GiTable>
    <EditDrawer ref="EditDrawerRef" @getTableData="getTableData"></EditDrawer>
  </div>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { usePagination } from '@/hooks'
import { momentList, momentUpdate } from '@/apis'
import EditDrawer from './edit.vue'
import ImgHoverPreview from '@/components/ImgHoverPreview/index.vue'
import router from '@/router'

defineOptions({
  name: 'materialList'
})
const columns = ref([
  {
    title: '群头像',
    width: 80,
    align: 'center',
    render: (data) => {
      const url = data.record.pic
      return h(ImgHoverPreview, {
        url,
        width: 50
      })
    }
  },
  {
    title: '群名称',
    width: 180,
    align: 'center',
    render: (data) => {
      const text = data.record.name
      return text || '--'
    }
  },
  {
    title: '圈编号',
    width: 180,
    align: 'center',
    render: (data) => {
      const text = data.record.momentNo
      return text || '--'
    }
  },
  {
    title: '标签',
    width: 180,
    align: 'center',
    slotName: 'label'
  },
  {
    title: '是否推送',
    width: 90,
    align: 'center',
    slotName: 'isPush'
  },
  {
    title: '是否启用',
    width: 90,
    align: 'center',
    slotName: 'enabled'
  },
  {
    title: '排序',
    width: 90,
    align: 'center',
    dataIndex: 'sort',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '操作',
    width: 90,
    align: 'center',
    slotName: 'action',
    fixed: 'right'
  }
])
const EditDrawerRef = ref()
const loading = ref(false)
const tableData = ref([])
const { pagination, setTotal } = usePagination(() => getTableData(), {
  defaultPageSize: 20
})
const listParams = reactive({
  page: 1
})
// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    const res = await momentList(listParams)
    tableData.value = res.data.list
    setTotal(res?.data?.meta?.pagination?.total)
  } finally {
    loading.value = false
  }
}
getTableData()
// // 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}
// 添加/编辑
const onAddOrEdit = (item) => {
  EditDrawerRef.value?.addOrEdit(item)
}
// 改变列表中的切换按钮状态
const handleChangeStatus = async (record, str, newValue) => {
  await new Promise((resolve, reject) => {
    momentUpdate({ ...record, [str]: newValue })
      .then(() => {
        Message.success('操作成功')
        getTableData()
        resolve(true)
      })
      .catch(() => {
        reject()
      })
  })
}
// 发送预览
const preview = (item) => {
  router.push({
    name: 'materialPreview',
    query: { id: item ? item.momentId : undefined },
    state: item ? { item: JSON.stringify(item) } : undefined
  })
}
</script>

<style lang="scss" scoped>
:deep(.arco-grid) {
  flex-wrap: wrap;
}
:deep(.arco-grid-item) {
  min-width: 250px;
}
:deep(.arco-alert-success) {
  padding: 14px 16px;
  border-color: rgb(var(--success-6));
  background-color: rgba(var(--success-6), 0.08);
  .arco-alert-content {
    color: rgb(var(--success-6));
    font-size: 12px;
  }
}
// :deep(.arco-descriptions-item-value-block) {
//   white-space: nowrap;
// }
:deep(.arco-radio-group .arco-radio) {
  margin-right: 10px;
}
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .btn_wrap {
    dl {
      border-radius: 5px;
      color: #3e3e3e;
    }
    .dl_1 {
      background: rgba(251, 230, 239);
    }
    .dl_2 {
      background: rgba(232, 249, 240);
      dd {
        color: #0fbf60;
      }
    }
    .dl_3 {
      background: rgba(241, 241, 241);
      dd {
        color: rgba(157, 157, 157);
      }
    }
  }
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
</style>
